<template>
	<view class="zuipageWrap">
		<view class="J_top">
			<uniIcon type="search" size="26" class="J_searchIcon"></uniIcon>
			<view class="J_search">
				<input class="uni-input" confirm-type="search" placeholder="请输入发票号"
					v-model="invoiceId" @input="inputEvent" @confirm="inputConfirm" :focus="triggerFocus1" />
			</view>
			<uniIcon type="scan" size="26" class="J_scanIcon" @click="scanCode"></uniIcon>
		</view>
		<view class="J_content" v-if="tableData.code">
			<view class="J_card">
				<view class="uni-flex uni-row">
					<view class="J_tit"><view class="J_cicon"></view>发票信息</view>
				</view>
				<view class="uni-flex uni-row">
					<view class="J_label">发票号：</view>
					<view class="J_des">{{tableData.code}}</view>
				</view>
				<view class="uni-flex uni-row">
					<view class="J_label">发票金额：</view>
					<view class="J_des">{{tableData.price | priceFormat(2,'￥',true)}}</view>
				</view>
				<view class="uni-flex uni-row">
					<view class="J_label">开票人：</view>
					<view class="J_des">{{tableData.company}}</view>
				</view>
			</view>
			<view class="J_card" v-for="(invoice, index) in tableData.medList" :key="index" :class="{isSlide: !invoice.slideHide}">
				<view class="uni-flex uni-row" @click="zslide(invoice, index)">
					<view class="J_tit">
						<view class="J_cicon"></view>
						药品信息
						<uniIcon type="arrowdown" size="20" class="J_slideIcon" v-if="invoice.slideHide"></uniIcon>
						<uniIcon type="arrowup" size="20" class="J_slideIcon" v-if="!invoice.slideHide"></uniIcon>
					</view>
				</view>
				<view class="uni-flex uni-row">
					<view class="J_label">品名：</view>
					<view class="J_des">{{invoice.name}}</view>
				</view>
				<view class="uni-flex uni-row">
					<view class="J_label">单价：</view>
					<view class="J_des">{{invoice.unitprice | priceFormat(2,'￥',true)}}</view>
				</view>
				<view class="uni-flex uni-row">
					<view class="J_label">数量：</view>
					<view class="J_des">{{invoice.num}}</view>
				</view>
				<view class="uni-flex uni-row">
					<view class="J_label">金额：</view>
					<view class="J_des">{{invoice.price | priceFormat(2,'￥',true)}}</view>
				</view>
				<view class="uni-flex uni-row" :class="{no_border: invoice.slideHide}">
					<view class="J_label">规格：</view>
					<view class="J_des">{{invoice.specifications}}</view>
				</view>
				<view class="uni-flex uni-row" :class="{isSlide: invoice.slideHide}">
					<view class="J_label">单位：</view>
					<view class="J_des">{{invoice.unit}}</view>
				</view>
				<view class="uni-flex uni-row" :class="{isSlide: invoice.slideHide}">
					<view class="J_label">厂商：</view>
					<view class="J_des">{{invoice.factory}}</view>
				</view>
				<view class="uni-flex uni-row" :class="{isSlide: invoice.slideHide}">
					<view class="J_label">批号：</view>
					<view class="J_des">{{invoice.batchnumber}}</view>
				</view>
				<view class="uni-flex uni-row" :class="{isSlide: invoice.slideHide}">
					<view class="J_label">有效期：</view>
					<view class="J_des">{{invoice.validity}}</view>
				</view>
				<view class="uni-flex uni-row" :class="{isSlide: invoice.slideHide}">
					<view class="J_label">生产日期：</view>
					<view class="J_des">{{invoice.productdate}}</view>
				</view>
			</view>
		</view>
		
		<view class="uni-btn-v J_foot" v-if="showBtnFlag">
			<button type="default" class="zbtn J_cancel" @click="cancle">取消</button>
			<button class="zbtn J_sub" @click="save">提交</button>
		</view>
	</view>
</template>

<script>

import uniIcon from "@/components/uni-icon/uni-icon.vue";
import {zInvoiceByCode, zInvoiceSave} from '@/util/api';
import {
	mapState,mapGetters,mapMutations,mapActions
} from 'vuex'
export default {
	components: {uniIcon},
	data() {
		return {
			invoiceId: '',
			maxlength: 20,
			tableData: {
				code: '',
				price: '',
				company: '',
				medList: []
			},
			triggerFocus1: false,
			showBtnFlag: false
		}
	},
	computed: {
		...mapState(['pid'])
	},
	onLoad(e) {
		/* this.invoiceId = '12345678';
		this.fetchInvoice(); */
	},
	onNavigationBarButtonTap(e) {
		uni.navigateTo({
			url: '/pages/invoice/list'
		});
	},
	methods: {
		async fetchInvoice () {
			this.triggerFocus1 = false;
			this.showBtnFlag = false;
			uni.hideKeyboard();
			let tpl_param = {
        invoiceId: this.invoiceId
      }
			uni.showLoading({title: '加载中', mask: true});
			let res = await zInvoiceByCode(tpl_param);
      res = this.zutil.formatAxiosData(res);
		console.info(JSON.stringify(res));
			uni.hideLoading();
			
			if(res.status == 0){
				this.tableData = res.data;
				this.showBtnFlag = true;
			}else if(res.status == 1){
				this.tableData = res.data;
				this.zutil.ztip('发票已复核');
				this.zutil.zuiShaker();
			}else{
				this.zutil.ztip(res.description || '未获取到发票信息');
				this.zutil.zuiShaker();
			}
			this.invoiceId="";
		  this.triggerFocus1 = true;
		},
		inputEvent (e) {

			//let _val = e.detail.value;
			// if(_val.length == this.maxlength)
			// 	this.fetchInvoice();

		},
		inputConfirm (e) {
			let _val = e.detail.value;
			// if(_val.length == this.maxlength)
				this.fetchInvoice();
		},
		cancle () {
			this.invoiceId = '';
			this.tableData.code = '';
			this.tableData.medList = [];
			this.triggerFocus1 = false;
			setTimeout(()=>{
				this.triggerFocus1 = true;
			}, 50)
		},
		save () {
			if(!this.tableData.code){
				this.zutil.ztip("请输入或者扫码发票号");
				return false;
			}
			this.zutil.zconfirm("是否确认复核该发票？", (type)=>{
				if(type){
					// 确定
					this.saveS();
				}else{
					// 取消
				}
			});
		},
		async saveS () {
			let tpl_param = {
			  invoiceId: this.invoiceId,					
			  code: this.tableData.code
			}
			
			
			uni.showLoading({title: '加载中', mask: true});
			let res = await zInvoiceSave(tpl_param);
			res = this.zutil.formatAxiosData(res);
			uni.hideLoading();
			if(res.status == 0){
				this.zutil.ztip(res.description || "复核发票成功");
				this.cancle();
			}else{
				this.zutil.zalert(res.description || "复核发票失败！");
				this.zutil.zuiShaker();
			}
		},
		zslide (item, index) {
			let slideFlag = item.slideHide;
			this.$set(item, 'slideHide', !slideFlag);
		},
		scanCode () {
			var _that = this;
			uni.scanCode({
				success: function (res) {
					_that.cancle();
					let cres = res.result;
					_that.invoiceId = cres;
					_that.fetchInvoice();
				},
				fail: function (res) {}
			})
		}
	},
	filters:{
		//价格过滤器
		// arg表示原始参数,num表示小数点位,默认保留两位,symbol表示符号,spilt是否进行逗号分隔【true，false】
		priceFormat:function (arg,num=0,symbol,spilt=false) {
			/**
			 * 默认数字: {{number|priceFormat()}}
				保留两位小数: {{number|priceFormat(2)}}
				保留三位小数: {{number|priceFormat(3)}}
				添加￥符号并保留两位: {{number|priceFormat(2,'￥')}}
				添加$符号并保留三位: {{number|priceFormat(3,'$')}}
				添加千分号符号: {{number|priceFormat(0,'',true)}}
				添加千分号符号并保留两位: {{number|priceFormat(2,'',true)}}
				添加￥和千分号符号并保留两位: {{number|priceFormat(2,'￥',true)}}
			 **/
			arg=Number(arg).toFixed(num);
			if(spilt==true){
				if (arg.indexOf('.') == -1) {
					arg=arg.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
				}else{
					var parts = arg.split(".");
					parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
					arg=parts.join(".");
				}
			}
			if(symbol){
				arg=symbol+arg;
			}
			return arg;
		},
	}
}
</script>

<style scoped lang="scss">
.zuipageWrap {
	background: #F5F5F5;
	height: 100%;
	
	.J_top {
		position: relative;
		padding: 20upx;
		background: #fff;
		
		.J_searchIcon {
			position: absolute;
	    left: 46upx;
	    top: 34upx;
	    z-index: 99;
		}
		.J_search {
			width: 100%;
			height: 80upx;
			display: flex;  
	    align-items: center;
			
			.uni-input {
				height: 80upx;
				line-height: 80upx;
				min-height: 80upx;
				padding: 0 24upx 0 88upx;
				border: 1px solid #ddd;
				border-radius: 40upx;
			}
		}
		.J_scanIcon {
			position: absolute;
			right: 36upx;
			top: 34upx;
			z-index: 99;
			width: 80upx;
			text-align: center;
		}
	}
	
	.J_content {
		padding: 20upx 0 60px;
		background: #F5F5F5;
		.J_card {
			border-top: 2upx solid #ddd;
			border-bottom: 2upx solid #ddd;
			height: auto;
			background: #fff;
			padding: 0 32upx;
			color: #3C3C3C;
			margin-bottom: 20upx;
			overflow: hidden;
			
			&.isSlide, &:first-child {
				height: auto;
			}
			
			&:last-child {
				margin-bottom: 0;
			}
	
			.uni-row {
				border-bottom: 2upx solid #e5e5e5;
				padding: 18upx 0;
				&.no_border {
					border-bottom: 0;
				}
				&:first-child {
					padding: 28upx 0;
				}
				&:last-child {
					border-bottom: 0;
				}
				&.isSlide {
					display: none!important;
				}
				.J_tit {
					height: 44upx;
					line-height: 44upx;
					font-size: 30upx;
					position: relative;
					padding-left: 32upx;
					font-weight: bold;
					overflow: hidden;
					width: 100%;
					.J_cicon {
						position: absolute;
						left: 0;
						top: 0;
						width:12upx;
						height: 44upx;
						background: #FFC12E;
						display: block;
					}
					.J_slideIcon {
						position: absolute;
						right: 0;
						top: 3px;
					}
				}
				.J_label {
					width: 184upx;
				}
				.J_des {
					flex: 1;
					position: relative;
					text-align: right;
					.uni-input {
						padding: 0 56upx 0 24upx;
					}
				}
			}
		}
	}
	
	.uni-btn-v {
		display: flex;
		justify-content: center;
		&.J_foot {
			position: fixed;
	    bottom: 0;
	    left: 0;
	    right: 0;
			background: #fff;
	    box-shadow: 0px 0px 20upx rgba(0,0,0,0.2);
			padding: 0;
		}
		.zbtn {
			width: 35%;
			font-size: 32upx;
	    display: block;
	    border-radius: 0;
	    margin: 0;
	    height: 100upx;
	    line-height: 100upx;
			background: #fff;
			&:after {
				width: 0;
				height: 0;
			}
		}
		.J_cancel {
			color: #000;
		}
		.J_sub {
			background: #018DEE;
	    color: #fff;
			flex: 1;
		}
	}
}
</style>
